<html>
  <head>
    <meta name="layout" content="main" />
  <resource:carousel />
  <resource:lightBox />
  <title>Display Item</title>
</head>
<body>
  <div id="contentText">
    <h2><span>Product</span>${item.name}</h2>
  </div>
  <div id="wrap90">
    <div id="columnLeft">
      <br><g:if test="${item.image}">
        <richui:lightBox href="../renderProductPhoto/${item.id}">
          <img src="<g:createLink controller='item' action='renderProductPhoto' id='${item.id}'/>" style="width:200px"/></img>
        </richui:lightBox>
      </g:if>
    </div>
    <div id="columnRight">
      Name: <h1>${item.name}</h1>
      <br>Price: ${item.price}
      <br>Brand: ${item.brand}
      <br>Description: ${item.description}
      <br>

      <div class="buttons" style="width:100px; padding-left:10px">
        <br>
        <g:link controller ="cart" action="add" id ="${item.id}"> Add to cart </g:link>
        <br>
        <br>
      </div>
    </div>
    <div style="height:30px; clear: both;"></div>
    <div id="greyacross">
      <h3><span>Related </span>items</h3><br>
    </div>
    <div style="height:230px;">
      <richui:carousel direction="horizontal" carouselStyle="height: 200px; width: 100%;" itemsStyle="height: 200px; width: 835px;">
        <g:each in="${categoryItems}" var="j">
          <g:if test="${j.id != item.id}">
            <richui:carouselItem><img src="<g:createLink controller='item' action='renderProductPhoto' id='${j.id}'></g:createLink>" alt="hello" style="max-height:180px"/><br><g:link controller="item" action="displayItem" id="${j.id}">${j?.encodeAsHTML()}</g:link></richui:carouselItem>
          </g:if>
        </g:each>
      </richui:carousel>
    </div>
  </div>


</body>
</html>
